<template>
	<NavBarVue :title="'评论'" />
	<view class="Praise">
		<view class="comlist" v-for="item in comlist" :key="item.id">
			<view class="lefcom" >
					<BaseCoverImage :src="item.imgone" class="tx" />
					<view class="conul">
						<view class="conli" > 
							<view class="act" >
								<view style="font-size: 28rpx; font-weight: 600;">{{item.name}}</view>
								<view class="zo">作者</view>
							</view>
							<view style="font-size: 20rpx; color:#999;margin-bottom: 10rpx;">{{item.hf}}</view>
							<view style="font-size: 24rpx; color:#666;margin-bottom: 20rpx;">{{item.nr}}</view>
							<view  class="play" >
								<view style="font-size: 20rpx; color:#ccc; margin-bottom: 10rpx;">
									{{item.play}}
								</view>
								<view class="fx"></view>
							</view>
						</view>
						<view class="commpl">
							<view style="display: flex;" class="zlik">
								<u-icon name="heart" color="#666" size="18"></u-icon>
								<view>赞</view>
							</view>
							<view style="display: flex;" class="plik">
								<u-icon name="chat" color="#666" size="18"></u-icon>
								<view>评论</view>
							</view>
						</view>
					</view>
			</view>
			<view class="rigcom">
				<BaseCoverImage :src="item.imgtwo" />
			</view>
		</view>
	</view>	
</template>

<script setup>
	import { reactive ,ref } from 'vue'; 
	//数据--------
	const comlist =reactive([
		{id:0,name:"壹禾子",hf:"回复了你的评论 2天前",nr:"这个活动非常有意思",play:"好玩吗",imgone:"/static/images/1002.png",imgtwo:"/static/images/1001.png"},
		{id:1,name:"阿西吧",hf:"回复了你的评论 2天前",nr:"这个活动非常有意思",play:"好玩吗",imgone:"/static/images/1003.png",imgtwo:"/static/images/1001.png"},
		{id:2,name:"壹禾子",hf:"回复了你的评论 2天前",nr:"这个活动非常有意思",play:"好玩吗",imgone:"/static/images/1004.png",imgtwo:"/static/images/1001.png"},
		{id:3,name:"壹禾子",hf:"回复了你的评论 2天前",nr:"这个活动非常有意思",play:"好玩吗",imgone:"/static/images/1005.png",imgtwo:"/static/images/1001.png"}
	])
	
</script>

<style lang="scss" scoped>
	.Praise{
		width: 100%;
		height: 100%;
		overflow: auto;
		background:#fff;
		box-sizing: border-box;
		padding: 0 40rpx;
		.comlist{
			display: flex;
			justify-content: space-between;
			background:#fff;
			margin-bottom: 3rpx;
			padding: 20rpx 0;
			border-top: 2px solid #f2f2f2;
			.rigcom {
				width: 80rpx;
				height: 80rpx;
			}
		}
		.comlist:last-child {
			border-bottom: 2px solid #f2f2f2;
		}
	}
	.login_top {
		height: 80rpx;
		display: flex;
		align-items: center;
		background: white;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		.top_p {
			flex: 1;
			text-align: center;
			font-weight: bold;
		}
	}
	.act{
		width: auto;
		line-height: 40rpx;
		height: 40rpx;
		display: flex; 
		font-size: 20rpx;
		margin-bottom: 10rpx;
		.zo{
			margin-left: 10rpx;
			width: 60rpx;
			line-height: 30rpx;
			height: 30rpx;
			border-radius: 30rpx;
			text-align: center;
			border: 2rpx solid #ccc;
			color: #666;
			font-size:20rpx;
		}
	}
	.play{
		display: block;
		width: 200rpx;
		height: 40rpx;
		position: relative;
		box-sizing: border-box;
		padding: 0rpx 20rpx;
		
	}
	.fx{
			width: 6rpx;
			height: 30rpx;
			background: #f2f2f2;
			position: absolute;
			left: 0rpx;
			top: 0rpx;
			
		}
	
	
	.commpl{
		display: flex;
		font-size: 22rpx;
		
		.zlik{
			width: 110rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #f2f2f2;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 0rpx 20rpx;
			
		}
		.plik{
			margin-left: 20rpx;
			width: 120rpx;
			height: 50rpx;
			line-height: 50rpx;
			background: #f2f2f2;
			border-radius: 30rpx;
			box-sizing: border-box;
			padding: 0rpx 10rpx;
			
		}
		
	}
	.tx {
		width: 80rpx;
		height: 80rpx;
		border-radius: 40rpx;
		margin-right: 10rpx;
	}
	
	.tuc{
		width: 80rpx;
		height: 80rpx;
		border-radius: 10rpx;
	} 
	.lefcom{
		display: flex;
	}
</style>
